<template>
	<view class="content">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view slot='top'>
				<u-tabs ref="tabs" :current="tabsCurrent" :list="list" active-color="#ff4273" :is-scroll="false"
					@change="tabsChange"></u-tabs>
			</view>
			<!-- <showItem :list='dataList'></showItem> -->
			<u-waterfall v-model="dataList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="water-fall" v-for="(item, index) in leftList" :key="index" @click="toDetail">
						<u-lazy-load threshold="100" border-radius="10" :image="item.img" :index="index"
							:is-effect='false'>
						</u-lazy-load>
						<view class="title">
							{{item.title}}
						</view>
						<view class="avatar-nickname-like">
							<view class="avatar-nickname">
								<image :src="item.img"></image>
								<view class="nickname">
									{{item.nick}}
								</view>
							</view>
							<view class="like">
								<u-icon name="thumb-up" size="34"></u-icon> 110
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="water-fall" v-for="(item, index) in rightList" :key="index" @click="toDetail">
						<u-lazy-load threshold="100" border-radius="10" :image="item.img" :index="index"
							:is-effect='false'>
						</u-lazy-load>
						<view class="title">
							{{item.title}}
						</view>
						<view class="avatar-nickname-like">
							<view class="avatar-nickname">
								<image :src="item.img"></image>
								<view class="nickname">
									{{item.nick}}
								</view>
							</view>
							<view class="like">
								<u-icon name="thumb-up" size="34"></u-icon> 110
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
		</z-paging>
		<fixed-btn></fixed-btn>
	</view>
</template>
<script>
	import showItem from '@/components/showItem'
	import fixedBtn from '@/components/fixedBtn.vue'
	export default {
		components: {
			showItem,
			fixedBtn
		},
		data() {
			return {
				swiperCurrent: 0,
				dataList: [],
				tabsCurrent: 0,
				list: [{
					name: '热门'
				}, {
					name: '征友'
				}, {
					name: '自拍照'
				}, {
					name: '附近'
				}],
				request: {
					queryList: function() {
						return Promise.resolve([{
								img: 'https://www.auok.ltd/background.jpg',
								nick: '王老五',
								title: '就爱看的飞机喀什的积分卡上帝就发卡省的氨基酸的咖啡机ask的发掘考虑喀什觉得饭卡里说的'
							}, {
								img: 'https://www.auok.ltd/avatar.jpg',
								nick: '王老五',
								title: '就爱看的飞机喀什的积分卡上帝就发卡省的氨基酸的咖啡机ask的发掘考虑喀什觉得饭卡里说的'
							}, {
								img: 'https://www.auok.ltd/9981.jfif',
								nick: '王老五',
								title: '就爱看的飞机喀什的积分卡上帝就发卡省的氨基酸的咖啡机ask的发掘考虑喀什觉得饭卡里说的'
							},
							{
								img: 'https://www.auok.ltd/bg.png',
								nick: '王老五',
								title: '就爱看的飞机喀什的积分卡上帝就发卡省的氨基酸的咖啡机ask的发掘考虑喀什觉得饭卡里说的'
							}, {
								img: 'https://www.auok.ltd/avatar.png',
								nick: '王老五',
								title: '就爱看的飞机喀什的积分卡上帝就发卡省的氨基酸的咖啡机ask的发掘考虑喀什觉得饭卡里说的'
							},
							{
								img: 'https://www.auok.ltd/background.jpg',
								nick: '王老五',
								title: '就爱看的飞机喀什的积分卡上帝就发卡省的氨基酸的咖啡机ask的发掘考虑喀什觉得饭卡里说的'
							}
						])
					}
				}
			};
		},
		methods: {
			toDetail() {
				uni.navigateTo({
					url: '/pages/dynamicDetail/dynamicDetail'
				})
			},
			tabsChange(index) {
				this.tabsCurrent = index;
				//切换tab加载对应类型的列表数据

				this.$refs.paging.reload(true)
				this.$refs.uWaterfall.clear()
			},
			/**
			 * @param {Number} pageNo //页码
			 * @param {Number} pageSize //每页数量默认10
			 */
			queryList(pageNo, pageSize) {
				// console.log(pageNo, pageSize, this.request, this.dataList)
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
				
				this.request.queryList({
					pageNo,
					pageSize
				}).then(res => {
					console.log(res)
					
					//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
					this.$refs.paging.complete(res);
				}).catch(res => {
					//如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
					this.$refs.paging.complete(false);
				})
			}
		},
	};
</script>
<style scoped lang="scss">
	.title {
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin: 20rpx 0;
	}

	.avatar-nickname-like {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.avatar-nickname {
			display: flex;
			align-items: center;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}
	}

	.water-fall {
		border-radius: 8px;
		margin: 5rpx;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
		font-size: 28rpx;
	}

	

	


</style>
